<template>
  <div style="overflow-y: auto;">
    <div class="uploadtop">
      <a-form @submit="handleSubmit" style="width:85%;margin:0px auto;" :form="form">
        <a-row>
          <a-col :span="3">
            <div class="laber">账户可用余额:</div>
            <div class="laber">上传分账计划:</div>
            <div class="laber" style="margin-right:26px;margin-top:-5px">
              <a class="a-sty" style="color:#1478d5;" @click="getFileDownload()">下载模板</a>
            </div>
          </a-col>
          <a-col :span="9">
            <div class="ladata">{{cash | cashfilter}}元</div>
            <div class="ladata" style="margin-top:12px">
              <a-form-item :help="`仅支持XLS、XLSX格式文件`">
                <div>
                  <a-upload
                    name="upfile"
                    :headers="henderstoken"
                    action="/file/file/upload"
                    :fileList="otherfileList"
                    accept=".xls, .xlsx"
                    @change="handleChange"
                    :data="{to}"
                  >
                    <a-button>
                      <a-icon type="upload" />上传
                    </a-button>
                  </a-upload>
                </div>
              </a-form-item>
            </div>
            <div class="ladata">
              <a-button htmlType="submit" :loading="submitting" type="primary">确认分账</a-button>
            </div>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="uploadform">
      <div style="font-size:18px;font-weight:bolder;margin-bottom: 15px;">历史分账计划</div>
      <a-table
        :rowKey="record => record.ctime"
        :pagination="false"
        bordered
        :dataSource="dataSource"
        :columns="columns"
      >
        <span slot="Operation" slot-scope="record">
          <a-button @click="download(record.subAccount_FilePath)" type="primary">下载</a-button>
        </span>
      </a-table>
      <a-pagination
        v-if="page1>6"
        @change="onPageChange"
        :current="pagination.current"
        :total="pagination.total"
        :pageSize="query.pageSize"
        style="margin-top: 10px;text-align: center"
      />
    </div>
  </div>
</template>
<script>
import api from "@/common/api";
const columns = [
  {
    title: "上传日期",
    dataIndex: "ctime",
    width: "30%",
  },
  {
    title: "批次号",
    dataIndex: "batchNo",
    width: "20%",
  },
  {
    title: "文件名称",
    dataIndex: "fileName",
    width: "40%",
  },
  {
    title: "操作",
    width: "10%",
    align: "center",
    scopedSlots: { customRender: "Operation" },
  },
];
export default {
  data() {
    return {
      otherfileList: [],
      fileName: "",
      fileurl: "",
      cash: "",
      form: this.$form.createForm(this),
      columns,
      page1: "",
      fileHostAddr: localStorage.getItem("fileHostAddr"),
      pagination: { current: null, total: null },
      submitting: false,
      query: {
        page: 1,
        pageSize: 6,
        data: {},
      },
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      to:sessionStorage.getItem("memberNo") + "_" + sessionStorage.getItem("username"),
      dataSource: [],
    };
  },
  created() {},
  mounted() {
    // this.getHistoricalplan();
  },
  activated() {
    this.getHistoricalplan();
  },
  filters: {
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2);
      // return Number(value).toFixed(2)
    },
  },
  methods: {
    handleChange({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".xls", ".xlsx"];
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传文件仅支持 xls、 xlsx 2种格式！");
        return;
      }
      if (fileList.length > 1) {
        // console.log(fileList);

        let newfileList = fileList[1];
        this.otherfileList = [];
        this.otherfileList.push(newfileList);
        // this.otherfileList = newfileList;
      } else {
        this.otherfileList = fileList;
      }

      console.log(this.otherfileList);
      this.fileurl = this.otherfileList[0].response;
      this.fileName = this.otherfileList[0].name;
    },

    handleSubmit(e) {
      e.preventDefault();
      console.log(this.fileurl.data);
      // console.log(this.fileName);
      this.submitting = true;
      var file = this.fileName.split(".");
      var fileName1 = file[0];
      var fileType1 = file[1];
      // console.log(fileName1);
      // console.log(fileType1);
      //this.fileHostAddr
      this.$axios
        .post("/agent/rechargeDivideAccount/save", {
          fileName: fileName1,
          subAccount_FilePath: this.fileurl.data,
          fileType: fileType1,
        })
        .then((res) => {
          console.log("提交成功", res);
          this.submitting = false;
          if (res.data.code == "OK") {
            this.$router.push({
              name: "确认收单分账",
              params: {
                totalAmount: res.data.data.totalAmount,
                total: res.data.data.total,
                mobileNo: res.data.data.mobileNo,
                batchNo: res.data.data.batchNo,
              },
            });
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource];
      const target = dataSource.find((item) => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dataSource = dataSource;
      }
    },
    onDelete(key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter((item) => item.key !== key);
    },
    download(id) {
      console.log(id);
      window.open(id, "_black");
    },
    onPageChange: function (page, pageSize) {
      console.info(page, pageSize);

      this.query.page = page;
      this.query.pageSize = pageSize;
    },
    getHistoricalplan() {
      this.$axios.get("/agent/rechargeDivideAccount/findList").then((res) => {
        console.log(res);
        if (res.data.code == "OK") {
          this.cash = res.data.data.amount;
          this.dataSource = res.data.data.rechargeSubPlanDTOList;
        }
      });
    },
    getFileDownload() {
      let data = "payment_template";
      api.getFilePath(
        data,
        (res) => {
          console.log(res);
          if (res.code == "OK" && res.data != null) {
            const a = document.createElement("a");
            a.download = `代付模板`;
            let downloadUrl = "/file/file/download/" + res.data;
            a.href = downloadUrl;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          } else {
            this.$message.error("未找到该文件");
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
  },
};
</script>
<style lang="less" scoped>
.uploadtop {
  height: 25vh;
}
.laber {
  text-align: right;
  margin-right: 10px;
  margin-top: 20px;
}
.laberbutton {
  color: #387cfa;
  cursor: pointer;
}
.ladata {
  margin-top: 20px;
}
.uploadform {
  width: 80%;
  margin: 0 auto;
  height: 50vh;
}
</style>